<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<h:head>

	<link type="text/css" rel="Stylesheet"
		href="../../../css/jquery-ui-1.8.20.custom.css" />

	<link type="text/css" rel="Stylesheet" href="../../../css/style_coopac.css" />
	<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
	<h:outputScript library="primefaces" name="jquery/jquery.js" />
	<script src="js/jquery.validationEngine-pe.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery-ui-1.8.20.custom.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.maskedinput-1.3.js" type="text/javascript"></script>
    <script src="js/jquery.validate.js" type="text/javascript"></script>
    <script src="js/jQuery.clearFields.min.js" type="text/javascript"></script>
    <script src="js/jquery.alphanumeric.js" type="text/javascript"></script>
    <script src="js/custom.js" type="text/javascript"></script>
	 <script  language="javascript" type="text/javascript">

	 </script>
	 
	
</h:head>

<h:body>
	<div id="contenedor">
		<div id="headerPlataforma"></div>

		<div id="menu">
			<ui:include src="../../00_genericos/menu.xhtml"></ui:include>
		</div>

		<div id="formularios">
			<h:form id="form" prependId="true">
				<div id="cuerpo">
					<p:panel header="Registro de Solicitud de Socio - Persona" style="font-size:20px; height:50px;">
					</p:panel>
					<p:panel header="Buscar Persona" toggleable="true">
						<div class="rowForm">
							<div class="label">
								<label>Buscar por.:</label>
							</div>
							<div class="select">
								<p:selectOneMenu style="width:160px">
									<f:selectItem itemLabel="DNI" itemValue="1" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label>Criterio:</label>
							</div>
							<div class="field">
								<p:inputText  value="#{solicPersona.numdocumentoPersonaN}"  styleClass="numDocN"  id="numDocN" 
									style="width:157px" />
							</div>
							<div class="buttonSearch">
								<p:commandButton actionListener="#{solicPersona.buscarByNumDocumento}" styleClass="botonBuscarN" 
								update=":form"  icon="ui-icon-search" ></p:commandButton>
							</div>
						</div>
					</p:panel>
					<p:panel header="Datos Persona Básicos II" toggleable="true">
						<div class="rowForm">
							<div class="label">
								<label>Ape.Paterno:</label>
							</div>
							<div class="field">
								<p:inputText id="apePatN"
									value="#{solicPersona.personaN.apellidoPaternoRazonSocial}"  styleClass="apePatN validate[required,custom[onlyLetterSp],minSize[3]]"
									style="width:453px" />
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label>Ape.Materno:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.personaN.apellidoMaterno}"  id="apeMatN"  styleClass="apeMatN validate[required,custom[onlyLetterSp],minSize[3]]"
									style="width:453px" />
								<p:watermark for="apeMatN" value="ingrese tu apellido"></p:watermark>
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label>Nombres:</label>
							</div>
							<div class="field">
								<p:inputText id="nomN"
									value="#{solicPersona.personaN.nombrePersonaNombreComercial}" styleClass="nomN validate[required,custom[onlyLetterSp],minSize[3]]"
									style="width:453px" />
							</div>
						</div>

						<div class="rowForm">
							<div class="label">
								<label for="namevv">Tipo Doc.:</label>
							</div>
							<div class="select">
								<p:selectOneMenu value="#{solicPersona.tipoDocumentoN.idTipoMaestro}" styleClass="required"
									style="width:160px">
									<f:selectItem itemLabel="Seleccione" />
									<f:selectItems value="#{maestro.listaTipodocumento}" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label for="namevv">Número:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.documentoPersonaN.numero}" id="numDocN2" styleClass=" numDocN2 validate[required,custom[onlyLetterNumber],minSize[3]]"
									style="width:157px" />
							</div>
						</div>
						
						<div class="rowForm">
							<div class="label">
								<label>Fch.Nacimiento:</label>
							</div>
							<div class="calendar">
								<p:calendar></p:calendar>
							</div>
							<div class="label">
								<label>Sexo:</label>
							</div>
							<div class="select">
								<p:selectOneMenu value="#{solicPersona.personaN.sexo}" style="width:160px">
									<f:selectItem itemLabel="Seleccione" />
									<f:selectItem itemValue="1" itemLabel="Hombre" />
									<f:selectItem itemValue="0" itemLabel="Mujer" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label>Estado Civil:</label>
							</div>
							<div class="select">
								<p:selectOneMenu value="#{solicPersona.tipoEstadoCivilN.idTipoMaestro}" style="width:160px">
									<f:selectItem itemLabel="Seleccione" />
									<f:selectItems value="#{maestro.listaEstadoCivil}" />
								</p:selectOneMenu>
							</div>
						</div>

						<div class="rowForm">
							<div class="label">
								<label for="namevv">Tipo Telef:</label>
							</div>
							<div class="select">
								<p:selectOneMenu value="#{solicPersona.tipoTelefonoN.idTipoMaestro}"
									style="width:160px">
									<f:selectItem itemLabel="Seleccione" />
									<f:selectItems value="#{maestro.listaTipotelefono}" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label>Número:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.telefonoPersonaN.numero}" id="numtelfN" styleClass="numtelfN validate[required]"
									style="width:157px" />
							</div>
							<div class="label">
								<label>Anexo:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.telefonoPersonaN.anexo}" id="numAnxN" 
									style="width:157px" />
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label>Email:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.personaN.email}" id="numEmailN"
									style="width:453px" />
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label>Página Web:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.personaN.paginaWeb}" id="numPagwebN"
									style="width:453px" />
							</div>
						</div>
					</p:panel>




					<p:panel header="Datos Domiciliarios" toggleable="true">
						
						
						
						<div class="rowForm">
							<div class="label">
								<label>Departamento:</label>
							</div>
							<div class="select">
								<p:selectOneMenu id="selectDepartamento"
									value="#{ubigeo.idDepartamento}" style="width:160px">
									<f:selectItem itemLabel="Dpto." />
									<f:selectItems value="#{ubigeo.listaDepartamento}" />
									<p:ajax update="selectProvincia, selectDistrito" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label>Provincia:</label>
							</div>
							<div class="select">
								<p:selectOneMenu id="selectProvincia"
									value="#{ubigeo.idProvincia}" style="width:160px">
									<f:selectItem itemLabel="Provincia" />
									<f:selectItems value="#{ubigeo.listaProvincia}" />
									<p:ajax update="selectDistrito" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label>Distrito:</label>
							</div>
							<div class="select">
								<p:selectOneMenu id="selectDistrito"
									value="#{ubigeo.idDistrito}" style="width:160px">
									<f:selectItem itemLabel="Distrito" />
									<f:selectItems value="#{ubigeo.listaDistrito}" />
									<p:ajax update="selectDistritoDummy"></p:ajax>
								</p:selectOneMenu>
								<p:selectOneMenu id="selectDistritoDummy"
									value="#{solicPersona.distritoN.idUbigeo}" style="width:160px; display:none;">
									   <f:selectItem itemLabel="Dummy" itemValue="#{ubigeo.idDistrito}" />
							   </p:selectOneMenu>
							</div>
						</div>
						
						
						
						
						

						<div class="rowForm">
							<div class="label">
								<label for="namevv">Tipo Zona.:</label>
							</div>
							<div class="select">
								<p:selectOneMenu value="#{solicPersona.tipoZonaN.idTipoMaestro}"
									style="width:160px">
									<f:selectItem itemLabel="Seleccione" />
									<f:selectItems value="#{maestro.listaZona}" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label for="namevv">Zona:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.direccionPersonaN.nombreZona}" id="zonaN" styleClass="validate[required,custom[onlyLetterNumber],minSize[3]]"
									style="width:157px" />
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label for="namevv">Tipo Vía.:</label>
							</div>
							<div class="select">
								<p:selectOneMenu value="#{solicPersona.tipoViaN.idTipoMaestro}" style="width:160px">
									<f:selectItem itemLabel="Seleccione" />
									<f:selectItems value="#{maestro.listaVia}" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label for="namevv">Vía:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.direccionPersonaN.nombreVia}" id="viaN" styleClass="validate[required,custom[onlyLetterNumber],minSize[3]]"
									style="width:157px" />
							</div>
						</div>

						<div class="rowForm">
							<div class="label">
								<label>Número:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.direccionPersonaN.numero}" id="numDirN"
									style="width:157px" />
							</div>
							<div class="label">
								<label>#Dpto:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.direccionPersonaN.departamento}" id="depDirN"
									style="width:157px" />
							</div>
							<div class="label">
								<label>Interior:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.direccionPersonaN.interior}" id="inDirN"
									style="width:157px" />
							</div>
						</div>

						<div class="rowForm">
							<div class="label">
								<label>Manzana:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.direccionPersonaN.manzana}" id="manDirN"
									style="width:157px" />
							</div>
							<div class="label">
								<label>Lote:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.direccionPersonaN.lote}" id="lotDirN"
									style="width:157px" />
							</div>
							<div class="label">
								<label>Kilómetro:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.direccionPersonaN.kilometro}" id="kilDirN"
									style="width:157px" />
							</div>
						</div>


						<div class="rowForm">
							<div class="label">
								<label>Referencia:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.direccionPersonaN.referencia}"  id="refDirN"
									style="width:453px" />
							</div>
							<div class="label">
								<label>Tipo Vivienda.:</label>
							</div>
							<div class="select">
								<p:selectOneMenu value="#{solicPersona.tipoViviendaN.idTipoMaestro}"
									style="width:160px">
									<f:selectItem itemLabel="Seleccione" />
									<f:selectItems value="#{maestro.listaTipovivienda}" />
								</p:selectOneMenu>
							</div>
						</div>
					</p:panel>

					<p:panel header="Procesar" toggleable="true">
						
									<p:panel collapsed="#{solicPersona.btnGrabar}" >
									<p:commandButton actionListener="#{solicPersona.addSolicPersona}"
										value="Actualizar" update=":form" style="width:130px; height:25px;" >
									</p:commandButton>					
									<p:commandButton></p:commandButton>				
									<input type="submit" class="clear" value="Limpiar"></input>
									</p:panel>
									
									<p:panel collapsed="#{solicPersona.btnEditar}" >
									<input type="submit" class="clear" value="Limpiar"></input>
						+			<input type="submit" class="submit" value="Guardar"></input>
									</p:panel>
							
					</p:panel>
				</div>		
							<div id="popupConfirmacion" style="display: none;">
						         <br/><br/><p style="margin-left:50px;">Esta seguro de guardar.</p>
						        <p:commandButton actionListener="#{solicPersona.addSolicPersona}"
									value="Si" update=":form" style="width:100px; height:35px; margin:40px 75px;" styleClass="grabar" >
								</p:commandButton>								
						    </div>	
							 <div id="popup_error"  style="display: none;" >
						        <div class="error" >
						            <span></span>
						        </div>
						    </div>
				</h:form>
		</div>
		<div id="footerPlataforma"></div>

	</div>
	
	
</h:body>

</html>